<template>
  <div class="order-query-wrapper">
    <div class="content">
      <div class="form">
        <el-form :model="form" label-width="auto" style="width: 1600px; height: 300px;">
          <el-row class="first">
            <el-col :span="6">
              <el-form-item label="客户编号" class="bold-label" label-width="150px">
                <el-input v-model="form.customerNo" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户名称" class="bold-label" label-width="150px">
                <el-input v-model="form.customerName" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用电户号" class="bold-label" label-width="150px">
                <el-input v-model="form.electricityNo" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用电户名" class="bold-label" label-width="150px">
                <el-input v-model="form.electricityName" style="width: 200px"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="first">
            <el-col :span="6">
              <el-form-item label="客户类别" class="bold-label" label-width="150px">
                <el-input v-model="form.customerType" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商家编号" class="bold-label" label-width="150px">
                <el-input v-model="form.merchantNo" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商家名称" class="bold-label" label-width="150px">
                <el-input v-model="form.merchantName" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户地址" class="bold-label" label-width="150px">
                <el-input v-model="form.customerAddress" style="width: 200px"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="first">
            <el-col :span="2" :offset="20">
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="primary" @click="onReset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table">
        <el-table :data="tableData" style="width: 1600px; height: 80%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
          <el-table-column prop="customerNo" label="客户编号" width="200"/>
          <el-table-column prop="customerName" label="客户名称" width="200"/>
          <el-table-column prop="electricityNo" label="用电户号" width="200" />
          <el-table-column prop="electricityName" label="用电户名" width="200" />
          <el-table-column prop="customerType" label="客户类别" width="200" />
          <el-table-column prop="merchantName" label="商家编号" width="200" />
          <el-table-column prop="customerAddress" label="客户地址" width="200"/>
          <el-table-column fixed="right" label="操作" min-width="200">
            <template #default>
              <el-button link type="primary" size="small" @click="handleClick">
                查看详情
              </el-button>
              <el-button link type="primary" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'

const form = reactive({
  customerNo: '',      // 客户编号
  customerName: '',    // 客户名称
  electricityNo: '',   // 用电户号
  electricityName: '', // 用电户名
  customerType: '',    // 客户类别
  merchantNo: '',      // 商家编号
  merchantName: '',    // 商家名称
  customerAddress: ''  // 客户地址
});
const handleClick = () => {
  console.log('click')
}

// 客户编号客户名称用电户号用电户名客户类别商家编号商家名称客户地址

const tableData = [
  {
    customerNo: 'CUST2023001',
    customerName: '恒通商贸有限公司',
    electricityNo: '620104589632',
    electricityName: '恒通商贸有限公司',
    customerType: '企业',
    merchantNo: 'MER00582',
    merchantName: '城东电力服务中心',
    customerAddress: '上海市浦东新区张江高科技园区博云路2号'
  },
  {
    customerNo: 'CUST2023002',
    customerName: '李明',
    electricityNo: '620104753196',
    electricityName: '李明',
    customerType: '居民',
    merchantNo: 'MER00751',
    merchantName: '城西供电所',
    customerAddress: '北京市海淀区中关村大街28号院3号楼5单元'
  },
  {
    customerNo: 'CUST2023003',
    customerName: '盛世华庭小区业主委员会',
    electricityNo: '620104896325',
    electricityName: '盛世华庭物业',
    customerType: '集体',
    merchantNo: 'MER00632',
    merchantName: '城南电力集团',
    customerAddress: '广州市天河区珠江新城华穗路45号'
  },
  {
    customerNo: 'CUST2023004',
    customerName: '新华书店(城中店)',
    electricityNo: '620104235698',
    electricityName: '新华书店有限公司',
    customerType: '商业',
    merchantNo: 'MER00478',
    merchantName: '城北电力服务站',
    customerAddress: '成都市锦江区红星路三段16号'
  },
  {
    customerNo: 'CUST2023005',
    customerName: '王芳',
    electricityNo: '620104159753',
    electricityName: '王芳',
    customerType: '居民',
    merchantNo: 'MER00896',
    merchantName: '郊区供电所',
    customerAddress: '深圳市南山区科技园南区高新南一道8号'
  }
];

const onSubmit = () => {
  console.log('submit!')
}
const onReset = () => {
  console.log('submit!')
}
</script>
<style lang="scss" scoped>
.order-query-wrapper{
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center;     /* 垂直方向居中 */
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: lightcoral;

  .content{
    display: flex;
    flex-direction: column;
    justify-content: center; /* 水平方向居中 */
    align-items: center;     /* 垂直方向居中 */
    /* 比父容器宽小10px */
    width: calc(100% - 40px);
    /* 比父容器高小10px */
    height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 30px;

    .form{
      display: flex;
      justify-content: center; /* 水平方向居中 */
      align-items: center;     /* 垂直方向居中 */
      width: 100%;
      height: 400px;
      background-color: bisque;
      border-radius: 30px;
      margin-bottom: 30px;
    }
    .table{
      display: flex;
      justify-content: center; /* 水平方向居中 */
      align-items: center; 
      width: 100%;
      height: 400px;
      background-color: lightblue;
      border-radius: 30px;
    }
  }
}


</style>